import React, { PureComponent } from 'react'
import { Modal, Button } from 'antd'
import { ArrowsAltOutlined, ShrinkOutlined } from '@ant-design/icons'
import './style.less'

export default class CustomModal extends PureComponent {
  handleSwitchOutLine = () => {
    this.props.setScreenStatus()
  }

  renderTitle = (title, enLarge) => {
    const screenStatus = this.props.screenStatus
    if (enLarge) {
      return (
        <div className="titleWrap">
          <div className="title">{title}</div>
          <div className="icon" onClick={this.handleSwitchOutLine}>
            {screenStatus ? <ArrowsAltOutlined /> : <ShrinkOutlined />}
          </div>
        </div>
      )
    }
    return title
  }

  renderFooter = () => (
    <div className="footerWrap">
      <div className="next"></div>
      <div className="actionBtn">
        <Button type="primary">Cancle</Button>
        <Button type="primary">Ok</Button>
      </div>
    </div>
  )

  render() {
    const { children, title, enLarge, screenStatus, ...otherProps } = this.props
    return (
      <div className={`commonModal ${screenStatus ? '' : 'fullScreen'}`}>
        <Modal title={this.renderTitle(title, enLarge)} {...otherProps}>
          {children}
        </Modal>
      </div>
    )
  }
}
